<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/government/assessment' }"
      >质量评估标准</el-breadcrumb-item>
      <el-breadcrumb-item>机构自评</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0">
      <div style="width: 100%">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div class="obj_item">
            评估计划名称：{{ outDataObj.name ? outDataObj.name : "-" }}
          </div>
          <div class="obj_item">
            提交截止时间：{{
              outDataObj.deadlineSubmission
                ? outDataObj.deadlineSubmission.split("T")[0]
                : "-"
            }}
          </div>
          <!-- <div class="obj_item">
            状态：{{
              outDataObj.status
                ? option.find((item) => item.value === outDataObj.status).label
                : "-"
            }}
          </div> -->
        </div>
        <div class="obj_box">
          <div class="obj_item" style="width: 100%; display: flex">
            内容：
            <m-edit
              ref="wEdit_ass"
              style="width: 60%"
              :htmldata="outDataObj.content"
              :is-disabled="true"
            />
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item" style="width: 100%; display: flex">
            附件：
            <el-upload
              style="position: relative; min-height: 148px"
              action="/api/system/upload"
              list-type="picture-card"
              :auto-upload="true"
              :file-list="outDataObj.fileShow"
              disabled
            >
              <i slot="default" class="el-icon-plus" />
              <div slot="file" slot-scope="{ file }">
                <img
                  style="height: 148px"
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <div
                  class="text"
                  style="
                    display: block;
                    max-width: 148px;
                    word-break: break-all;
                  "
                >
                  {{ file.name ? file.name : "" }}
                </div>
                <span class="el-upload-list__item-actions">
                  <span
                    v-if="file.url !== fileImage"
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download" />
                  </span>
                </span>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">机构自评</div>
        <div class="obj_box">
          <div style="width: 100%">
            <div class="obj_bt_box">
              <div class="box_label">
                16项基础标准指标：<span
                  style="color: skyblue; margin-left: 10px; cursor: pointer"
                  @click="isShow1 = !isShow1"
                >收起</span>
              </div>
              <div v-if="isShow1" class="box_value">
                <el-table :data="tableData" style="width: 100%" border>
                  <el-table-column
                    prop="indexName"
                    label="指标"
                    align="center"
                  />
                  <el-table-column prop="name" label="园所自评" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.isPass ? "通过" : "不通过" }}
                      <!-- <el-radio-group v-model="scope.row.isPass">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                      </el-radio-group> -->
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <div v-for="(item, index) in assessmentList" :key="index">
                  <div>{{ item.name }}</div>
                  <div />
                </div> -->
              </div>
              <div v-else style="height: 100px; width: 100px" />
            </div>
            <div class="obj_bt_box">
              <div class="box_label">
                机构自评得分：{{ textarea }}
                <span
                  style="color: skyblue; margin-left: 10px; cursor: pointer"
                  @click="isShow2 = !isShow2"
                >收起</span>
              </div>
              <div v-if="isShow2" class="box_value">
                <my-table-report
                  ref="myTableReport"
                  :my-array-span-method="myArraySpanMethod"
                  :table-data="tableData1"
                  :table-header="tableHeader"
                  :operation="operation"
                />
              </div>
              <div v-else style="height: 100px; width: 100px" />
            </div>
            <div class="obj_bt_box" style="margin-top: 60px">
              <div
                class="box_label"
                style="display: flex; justify-content: space-between"
              >
                <div style="display: flex">
                  专家人员：
                  <div v-for="(item, index) in expertsName" :key="index">
                    {{ item }}，
                  </div>
                </div>
                <div style="display: flex; margin-right: 200px">
                  评估时间：
                  <div>
                    {{
                      evaluationPlan.createTime
                        ? evaluationPlan.createTime
                        : "-"
                    }}
                  </div>
                </div>
              </div>
            </div>
            <div class="obj_bt_box" style="margin-top: 60px">
              <div class="box_label">
                专家评价16项基础标准指标：<span
                  style="color: skyblue; margin-left: 10px; cursor: pointer"
                  @click="isShow3 = !isShow3"
                >收起</span>
              </div>
              <div
                v-if="isShow3"
                class="box_value"
                style="
                  display: flex;
                  border-top: 1px solid #e8e8e8;
                  border-left: 1px solid #e8e8e8;
                  font-size: 14px;
                  width: 98%;
                "
              >
                <div>
                  <div class="tr_box">指标</div>
                  <div
                    v-for="(eitem, eindex) in tableData2['政府评估']"
                    :key="eindex"
                    class="td_box"
                  >
                    {{ eitem.indexName ? eitem.indexName : "-" }}
                  </div>
                </div>
                <div
                  v-for="(item, index) in Object.keys(tableData2)"
                  :key="index"
                  style="flex: 1"
                >
                  <div class="tr_box">
                    {{ item }}
                  </div>
                  <div
                    v-for="(eitem, eindex) in tableData2[item]"
                    :key="eindex"
                    class="td_box"
                  >
                    {{ eitem.isPass ? "通过" : "不通过" }}
                  </div>
                </div>

                <!-- <div v-for="(item, index) in assessmentList" :key="index">
                  <div>{{ item.name }}</div>
                  <div />
                </div> -->
              </div>
              <div v-else style="height: 100px; width: 100px" />
            </div>
            <div class="obj_bt_box">
              <div class="box_label">
                机构自评的分：{{ textarea }}
                <span
                  style="color: skyblue; margin-left: 10px; cursor: pointer"
                  @click="isShow2 = !isShow2"
                >收起</span>
              </div>
              <div v-if="isShow2" class="box_value">
                <my-table-report
                  ref="myTableReport1"
                  :my-array-span-method="myArraySpanMethod"
                  :table-data="tableData1"
                  :table-header="tableHeader1"
                  :expert-rating="expertRating"
                  :operation="operation1"
                />
              </div>
              <div v-else style="height: 100px; width: 100px" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MEdit from './components/MEdit'
import MyTableReport from './components/myTableReport'
import { mapGetters } from 'vuex'
import { evaluationPlanGetById } from './api'
import fileImage from '@/assets/file_image.png'
export default {
  components: { MyTableReport, MEdit },
  data () {
    return {
      isShow1: true,
      isShow2: true,
      isShow3: true,
      textarea: '',
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      fileImage,
      fileListShow: [],
      dataObj: {},
      outDataObj: {},
      expertsName: [],
      expertsNameFor: [],
      evaluationPlan: {},
      tableHeader: [
        { label: `一级指标`, prop: 'firstIndicator' },
        { label: `一级指标分值`, prop: 'firstIndicatorScore' },
        { label: `二级指标`, prop: 'secondIndicator' },
        { label: `二级指标分值`, prop: 'secondIndicatorScore' },
        { label: `三级指标`, prop: 'thirdIndicator' },
        { label: `三级指标分值`, prop: 'thirdIndicatorScore' },
        { label: `指标内容`, prop: 'indicatorContent' },
        { label: `指标分值`, prop: 'indicatorScore' },
        { label: `评估方式`, prop: 'evaluationMethod' },
        { label: `参考依据`, prop: 'referenceBasis' },
        {
          label: `评估方式与信息采集`,
          prop: 'informationCollection',
          width: '140'
        },
        { label: `解释说明`, prop: 'explanation' }
      ],
      tableHeader1: [
        { label: `一级指标`, prop: 'firstIndicator' },
        { label: `一级指标分值`, prop: 'firstIndicatorScore' },
        { label: `二级指标`, prop: 'secondIndicator' },
        { label: `二级指标分值`, prop: 'secondIndicatorScore' },
        { label: `三级指标`, prop: 'thirdIndicator' },
        { label: `三级指标分值`, prop: 'thirdIndicatorScore' },
        { label: `指标内容`, prop: 'indicatorContent' },
        { label: `指标分值`, prop: 'indicatorScore' },
        { label: `评估方式`, prop: 'evaluationMethod' },
        { label: `参考依据`, prop: 'referenceBasis' },
        {
          label: `评估方式与信息采集`,
          prop: 'informationCollection',
          width: '140'
        },
        { label: `解释说明`, prop: 'explanation' },
        { label: `园所自评`, prop: 'areaScore' }
      ],
      expertRating: [],
      operation: [{ label: `机构自评（分数）`, prop: 'areaScore' }],
      operation1: [{ label: `政府评分`, prop: 'govScore' }],
      // operation1: [{ label: `机构自评（分数）`, prop: "areaScore" }],
      // 状态（1上线，2下线，3草稿）
      option: [
        {
          label: '未上传',
          value: 0
        },
        {
          label: '上线',
          value: 1
        },
        {
          label: '下线',
          value: 2
        },
        {
          label: '草稿',
          value: 3
        }
      ],
      assessmentList: [],
      tableData: [],
      tableData1: [],
      tableData2: {}
    }
  },
  computed: {
    ...mapGetters(['curArea', 'user'])
  },
  created () {
    const { id } = this.$route.query
    this.idS = id
    this.handleEvaluationPlanGetById()
  },
  mounted () {},
  methods: {
    myArraySpanMethod (row, column, rowIndex, columnIndex) {
      console.log('>>>>>', this.myMapData, columnIndex, rowIndex)
      return this.myMapData[rowIndex][columnIndex]
    },

    async handleEvaluationPlanGetById () {
      this.expertRating = []
      const res = await evaluationPlanGetById({
        id: this.idS,
        areaId: this.curArea.id
      })
      const fileList = JSON.parse(res.file)
      this.outDataObj = res
      this.outDataObj.file = fileList.map((item) => {
        return {
          uid: item.uid,
          name: item.name,
          url: item.url,
          uploadFile: item.url
        }
      })

      this.outDataObj.fileShow = this.outDataObj.file.map((item) => {
        let fileExtension = item.url.split('.').pop() // 获取文件后缀
        fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
        if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
          return item
        } else {
          return {
            uid: item.uid,
            name: item.name,
            url: this.fileImage,
            uploadFile: item.url
          }
        }
      })
      this.tableData = res.evaluateAreaList
      this.tableData1 = res.thirdIndicatorArea
      this.expertsName = res.expertsName
      this.evaluationPlan = res.evaluationPlan
      // 数据设置
      this.tableData1.map((item) => {
        for (let i = 0; i < item.expertScores?.length; i++) {
          item['Name' + i] = item.expertScores[i]
        }
      })
      for (let i = 0; i < this.expertsName.length; i++) {
        this.expertRating.push({
          label: this.expertsName[i],
          prop: 'Name' + i
        })
      }
      this.tableData2 = res.expertMap
      this.myMapData = this.getMerge(this.tableData1, this.tableHeader)
      console.log(this.tableData, this.tableData1, '1111111111111')
    },

    getMerge (myData, myHeader) {
      var map = new Array(myData.length)
        .fill()
        .map(() => new Array(myHeader.length).fill().map(() => [1, 1]))

      let number = 1
      let number2 = 1
      let numberIndex = 0
      let numberIndex2 = 0 //
      for (let i = 0; i < myData.length; i++) {
        const myI = i + 1
        // 获取一级指标的合并
        if (myI < myData.length && myData[i].firstId === myData[myI].firstId) {
          number++
          map[i][0] = [0, 0]
          map[i][1] = [0, 0]
        } else {
          if (number === 1) {
            map[i][0] = [1, 1]
            map[i][1] = [1, 1]
          } else {
            // 翻转过去
            map[numberIndex][0] = [number, 1]
            map[numberIndex][1] = [number, 1]
            number = 1
            numberIndex = i + 1
            map[i][0] = [0, 0]
            map[i][1] = [0, 0]
          }
        }
        // 获取二级指标的合并
        if (
          myI < myData.length &&
          myData[i].secondId === myData[myI].secondId
        ) {
          number2++
          map[i][2] = [0, 0]
          map[i][3] = [0, 0]
        } else {
          if (number2 === 1) {
            map[i][2] = [1, 1]
            map[i][3] = [1, 1]
          } else {
            // 填入
            map[numberIndex2][2] = [number2, 1]
            map[numberIndex2][3] = [number2, 1]
            number2 = 1
            numberIndex2 = i + 1
            map[i][2] = [0, 0]
            map[i][3] = [0, 0]
          }
        }
      }
      return map
    },
    handleRemove (file) {
      console.log(file)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.open(file.uploadFile, '_blank')
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    },
    handleFileSuccess (response, file, fileList) {
      this.fileList.push({
        uid: file.uid,
        name: response.data.name,
        url: response.data.url,
        uploadFile: response.data.url
      })
      let fileExtension = response.data.url.split('.').pop() // 获取文件后缀
      fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
      if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
        this.fileListShow.push({
          uid: file.uid,
          name: response.data.name,
          url: response.data.url
        })
      } else {
        this.fileListShow.push({
          uid: file.uid,
          name: response.data.name,
          url: fileImage,
          uploadFile: response.data.url
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  border: 1px solid #c0ccda;
  border-radius: 10px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  border: none !important;
  height: auto !important;
}
::v-deep .el-upload--picture-card {
  position: absolute;
  right: -148px;
  top: 0;
}
::v-deep .el-upload-list--picture-card {
  display: flex !important;
}
::v-deep .el-radio {
  margin: 0px 70px;
}
::v-deep .el-upload-list__item {
  overflow: inherit;
}
::v-deep .el-table tr {
  height: 70px;
}
.tr_box {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  flex: 1;
  padding: 10px;
  color: #909399;
  font-weight: bold;
  text-align: center;
}
.td_box {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  flex: 1;
  color: #606266;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  text-align: center;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 50px;
  .obj_bt_box {
    width: 100%;
    .box_label {
    }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
